<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
#left {
width:175px;
padding:0px;
float:left;
}
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
}
#content {
width:400px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}
#head {
background-color:transparent;
}
#right {
width:175px;
padding:0px;
float:left;
}
[v-cloak]{
	display: none;
}
</style>
<title>Vue</title>
</head>
<body>
<div id="box">
<div id="head">
</div>
<div id="left">
<h1>MENU left</h1>
<p>Menu with fixed width.</p>
<pre>
#left {
width:175px;
padding:0px;
float:left;
}
</pre>
</div>
<div id="content">
<h1>CONTENT</h1>
<pre>
html {
padding:0px;
margin:0px;
}
</pre>
<div class="container">
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量，即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
</div>
<div id="right">
<h1>MENU right</h1>
<pre>
#right {
width:175px;
padding:0px;
float:left;
}
</pre>
</div>
<br clear="all" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
	el: "#app",
	data: {
		message:'hty'
	 }
    });
var app2 = new Vue({
	  el: '#app-2',
	  data: {
	    message: '页面加载于 ' + new Date()
	  }
	});
var app3 = new Vue({
	el: "#app-3",
	data: {
		seen:true
	}
});
var app4 = new Vue({
	el: "#app-4",
	data: {
		todos: [
		  {text: 'hty1'},
		  {text: 'hty2'},
		  {text: 'hty3'}
		]
	}
});
var app5 = new Vue({
	 el: '#app-5',
	  data: {
	    message: 'Hello Vue.js!'
	  },
	  methods: {
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('')
	    }
	  }
});
var app6 = new Vue({
	  el: '#app-6',
	  data: {
	    message: 'Hello Vue!'
	  }
	});
//定义名为 todo-item 的新组件
Vue.component('todo-item', {
	  props: ['todo'],
	  template: '<li>{{ todo.text }}</li>'
	})
var app7 = new Vue({
	  el: '#app-7',
	  data: {
	    groceryList: [
	      { text: '蔬菜' },
	      { text: '奶酪' },
	      { text: '随便其他什么人吃的东西' }
	    ]
	  }
	})
</script>
</html>